<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>图文消息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 确保适当的绘制和触屏缩放 -->
    <link rel="stylesheet" href="{$url_css}bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="{$url_css}admin.css" type="text/css">

    <script type="text/javascript" src="{$url_js}jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="{$url_js}bootstrap.min.js"></script>
    <script type="text/javascript" src="{$url_public}editor/ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="{$url_public}editor/ckfinder/ckfinder.js"></script>
    <script type="text/javascript" src="{$url_js}calendar/WdatePicker.js"></script>
    <script type="text/javascript" src="{$url_js}jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="{$url_js}jquery-ui.min.js"></script>
    <script type="text/javascript" src="{$url_js}jquery.contextmenu.r2.js"></script>
    <style type="text/css">
        {literal}
        .cover_img_div input[type="file"] {
            cursor: inherit;
            opacity: 0;
            z-index: 99;
        }
        .atlas1_img_div input[type="file"] {
            cursor: inherit;
            opacity: 0;
            z-index: 99;
        }
        .div-child-left {
            position:absolute;
            top:0px;
            left:0;
            width:0px;
        }
        .cover_img_div{min-width:163px; position:relative;float:left;margin:4px;border:1px solid #ddd;border-radius:4px;text-align: center;}
        .atlas_img_div {width:360px; height: 240px; position:relative; float:left; border:1px solid #ddd; border-radius:4px; text-align: center;}
        .input-file {position: absolute;left: 0;bottom:0;width: 85px;z-index: 1;}
        .delete_btn {position: absolute;right: 0;bottom:0;width: 55px;z-index: 1;}
        .div_btn{ width: 100%;}
        .sort_input{}
        .sort_div{margin: 10px 75px; float: left;}
        .div_btn input{ width: 7%;}
        div.cate-wrapper ul.cate-list{max-height: 400px; overflow: auto}
        .atlas_img_div img{height: 240px}
        {/literal}
    </style>
</head>
<body>

<div class="container" style="width:96%">
    <form id="form_main" enctype="multipart/form-data" method="post" action="?do=Update">
    <table  class="table table-bordered table-striped" align="center">
        <input type="hidden" name="Id" value="{$info['Id']}"/>
        <tbody>
        <tr>
            <td colspan="2"><h5>{($info)?'编辑':'添加'}，其中标题、内容为必填</h5></td>
        </tr>
        <tr>
            <td><span style="color: red">*</span>标题：</td>
            <td><input type="text" class="form-control" id="Title" name="Title" value="{$info['Title']|html}" placeholder="标题" style="width: 85%;"/>
            </td>
        </tr>
        <tr>
            <td><span style="color: red">*</span>内容：</td>
            <td>
                <textarea id="Content" name="Content">{$info['Content']}</textarea><br>
            </td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>
                <div id="div_btn" class="div_btn">
                    <input type="button" onclick="From_submit(this);" class="btn btn-primary" value="保存"/>
                    <input type="reset" class="btn btn-warning" value="重置"/>
                    {if $info}
                        <input type="button" class="btn btn-default" onclick="javascript:history.go(-1)" value="返回"/>
                    {/if}
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    </form>
</div>

{literal}
    <script type="text/javascript">
        function From_submit(btn) {
            var btn = $(btn);
            if (btn.prop('disabled')) {
                return false;
            }
            $('#div_btn').find('input').prop('disabled', true);
            var title, content, error;
            title = $("#Title").val();
            content = editor.getData();
            error = '';
            if (trimStr(title) == '') {
                error += "标题不能为空！\r\n";
            }
            if (!trimStr(content)) {
                error += "内容不能为空！\r\n";
            }
            if (error != '') {
                $('#div_btn').find('input').prop('disabled', false);
                top.sweetAlert('数据不符合规范,禁止提交。', error, 'error');
                return false;
            } else {
                $('#Content').val(content);
                $('#form_main').submit();
                return false;
            }
        }

        //去除字符串首尾空格
        function trimStr(str) {
            return str.replace(/(^\s*)|(\s*$)/g, "");
        }

        var editor = CKEDITOR.replace('Content', {
            language: 'zh-cn',
            customConfig: '',
            height: "500px",
            //allowedContent: 'p[*]; b; a[*]; img[*]; br',
            allowedContent: true,
            extraPlugins: 'justify,html5video,autoformat,panelbutton,colorbutton,colordialog,font',
            toolbar: [
                ['Source', '-', 'Save', 'NewPage', 'DocProps', 'Preview', 'Print', '-', 'Templates', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo', 'Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt', 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField', '/', 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat', 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Link', 'Unlink', 'Anchor', 'Html5video', 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe', 'Autoformat', '/', 'Styles', 'Format', 'Font', 'FontSize', 'TextColor', 'BGColor', 'Maximize', 'ShowBlocks']
                //['Undo', 'Redo', 'Cut', 'Copy', 'Paste', 'PasteText', 'Maximize', 'Source', '-', 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock', '-', 'Link', 'Unlink', 'Image']
            ]
        });
        CKFinder.setupCKEditor(editor, {basePath: '/public/editor/ckfinder/'});
    </script>
{/literal}
</body>
</html>